<template>
    <div class="system-offer-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-card shadow="hover" class="layout-padding-auto">
                <div class="table-search-container">
                    <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="120px"
                        class="table-form">
                        <el-row>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="用户地址">
                                    <el-input v-model="state.ruleForm.address" style="width: 100%"
                                        placeholder="用户地址"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="上级地址">
                                    <el-input v-model="state.ruleForm.parentAddress" style="width: 100%"
                                        placeholder="上级地址"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                                <el-form-item label="等级">
                                    <el-select v-model="state.ruleForm.userLevel" placeholder="请选择" clearable
                                        style="width: 100%">
                                        <el-option :label="i.name" :value="i.id" v-for="i in state.levelList"
                                            :key="i.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="9" :lg="7" :xl="5" class="mb20" v-if="state.isToggle">
                                <el-form-item label="创建时间">
                                    <el-date-picker v-model="state.ruleForm.createTime" type="datetimerange"
                                        :picker-options="state.pickerOptions" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                                        style="width: 100%">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <el-form-item class="table-form-btn" :label-width="!state.isToggle ? '10px' : '35px'">
                                    <div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
                                        <span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
                                        <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
                                    </div>
                                    <div>
                                        <el-button size="default" type="primary" @click="refresh()">查询
                                        </el-button>
                                        <el-button size="default" type="info" class="ml10" @click="handleResetSearch()">
                                            重置
                                        </el-button>
                                        <el-button size="default" type="success" class="ml10" @click="addUser()">
                                            添加用户
                                        </el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <el-table size="default" :data="state.dataList" style="width: 100%" border=""
                    @sort-change="onSortHandler">
                    <!-- <el-table-column align="center" label="ID" width="100">
                        <template #default="scope">
                            <span>{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="用户地址" width="300" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.address || "-" }}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column align="center" label="上级地址" width="300" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.parentAddress || 0 }}</span>
                        </template>
                    </el-table-column>
                        <el-table-column align="center" label="身份" width="100">
                            <template #default="scope">
                                <!-- <span>V{{ scope.row.userLevel || 0 }}</span> -->
                               
						<dicItemsETag dicCode="kisar_user_identifier" :value="scope.row.identifier" :key="scope.row.identifier"/>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="等级类型" width="100">
                            <template #default="scope">
                                <el-tag v-if="scope.row.levelType == 10" effect="dark" type="success">普通定级</el-tag>
                                <el-tag v-if="scope.row.levelType != 10" effect="dark" type="warning">管理员定级</el-tag>
                            </template>
                        </el-table-column>
                    <el-table-column align="center" label="激活" width="100">
                        <template #default="scope">
                            <el-tag v-if="scope.row.activateStatus != 10" effect="dark" type="success">是</el-tag>
                            <el-tag v-if="scope.row.activateStatus == 10" effect="dark" type="danger">否</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="状态" width="100">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 10" effect="dark" type="success">正常</el-tag>
                            <el-tag v-if="scope.row.status != 10" effect="dark" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="left" align="left" label="用户地址" width="300" show-overflow-tooltip>
                        <template #default="scope">
                            <span>(V{{ scope.row.userLevel || 0 }}){{ scope.row.address || "-" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="直推人数" width="100" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.directActiveCount || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="小区业绩" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.teamSmallPerformance || 0 }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="投资金额" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.totalInvestmentAmount || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="团队业绩" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.teamPerformance || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="锁仓数量" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.totalLockedKisar || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="释放数量" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.totalReleasedKisar || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="订单总数" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.orderCount || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="解锁总数" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.releasedOrderCount || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="排单奖励次数" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.orderQueueRewardCount || 0 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建时间" width="160" prop="create_Date">
                        <template #default="scope">
                            <span>{{ formatDate2(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="200">
                        <template #default="scope">
                            <el-dropdown :hide-on-click="false" size="small" split-button type="primary">
                                操作设置
                                <template #dropdown>
                                    <el-dropdown-item>
                                        <el-button type="primary" size="small" @click="handlerEditLevel(scope.row)">
                                            设置等级
                                        </el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="primary" size="small" @click="handlerEditIndentifer(scope.row)">
                                            设置身份
                                        </el-button>
                                    </el-dropdown-item>

                                    <el-dropdown-item>
                                        <el-button type="primary" size="small" @click="handlerEditOrder(scope.row)">
                                            添加订单
                                        </el-button>
                                    </el-dropdown-item>

                                    <el-dropdown-item>
                                        <el-button type="primary" size="small" @click="handlerEdit8(scope.row)">
                                            查看图谱
                                        </el-button>
                                    </el-dropdown-item>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[20, 50, 100]" v-model:current-page="state.page" background
                v-model:page-size="state.limit" layout="total, sizes, prev, pager, next, jumper" :total="state.total">
            </el-pagination>
        </el-card>


        <editdialogNode ref="editdialogNodeRef" @refresh="refresh" />
        <editdialogNode2 ref="editdialogNodeRef2" @refresh="refresh" />
        <editdialogLevel ref="editdialogLevelRef" @refresh="refresh" />
        <editdialogPower ref="editdialogPowerRef" @refresh="refresh" />
        <addDialog ref="addDialogRef" @refresh="refresh" />
        <addOrderDialog ref="addOrderDialogRef"  ></addOrderDialog>
        <editIdentifierDialog ref="editIdentifierDialogRef"  @refresh="refresh"></editIdentifierDialog>

    </div>
</template>

<script setup lang="ts" name="systemMenu">
import { formatDate } from '/@/utils/formatTime';
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const dicItemsETag = defineAsyncComponent(() => import('/@/components/dic/dicItemsETag.vue'));
import { useRoute, useRouter } from 'vue-router';
import { useGatherApi } from '/@/api/gather/index';
const router = useRouter();


// 设置节点
const editdialogNode = defineAsyncComponent(() => import('./editdialogNode.vue'));
const editdialogNodeRef = ref();

const editdialogNode2 = defineAsyncComponent(() => import('./editdialogNode2.vue'));
const editdialogNodeRef2 = ref();
// 设置节点
const editdialogLevel = defineAsyncComponent(() => import('./editdialog.vue'));
const editdialogLevelRef = ref();
// 设置资产包
const editdialogPower = defineAsyncComponent(() => import('./editdialogPower.vue'));
const editdialogPowerRef = ref();

const addDialog = defineAsyncComponent(() => import('./addDialog.vue'));
const addDialogRef = ref();
const addOrderDialog = defineAsyncComponent(() => import('./addOrderDialog.vue'));
const addOrderDialogRef = ref();

const editIdentifierDialog = defineAsyncComponent(() => import('./editIdentifierDialog.vue'));
const editIdentifierDialogRef = ref();



const state = reactive({
    isToggle: false,
    sorts: {},
    page: 1,
    limit: 20,
    total: 0,
    dataList: [] as any,
    levelList: [] as any,
    ruleForm: {
        parentAddress: "",
        address: "",
        userLevel: "",
        nodeLevel: "",
        nodeALevel: "",
        nodeBLevel: "",
        nodeCLevel: "",
        nodeDLevel: "",
        createTime: []
    },
    pickerOptions: {
        shortcuts: [
            {
                text: "最近一周",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 7
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近一个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 30
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近三个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 90
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
        ],
    }

});







const refresh = () => {
    accountList();
}



const handlerEditPower = (row: any) => {
    editdialogPowerRef.value.openDialog("edit", row);
}

const handlerEditNode = (row: any) => {
    editdialogNodeRef.value.openDialog("edit", row);
}

const handlerEditNode2 = (row: any) => {
    editdialogNodeRef2.value.openDialog("edit", row);
}



const handlerEditLevel = (row: any) => {
    editdialogLevelRef.value.openDialog("edit", row, state.levelList);
}

const handlerEditOrder = (row: any) => {
    addOrderDialogRef.value.openDialog("edit", row);
}

const handlerEditIndentifer = (row: any) => {
    editIdentifierDialogRef.value.openDialog("edit", row);
}





const addUser = () => {
    addDialogRef.value.openDialog("add");
}





const handleResetSearch = () => {
    state.ruleForm = {
        parentAddress: "",
        address: "",
        userLevel: "",
        nodeLevel: "",
        nodeALevel: "",
        nodeBLevel: "",
        nodeCLevel: "",
        nodeDLevel: "",
        createTime: []
    };
    state.page = 1;
    state.limit = 20;
    accountList();
}


const formatDate2 = (str: any) => {
    if (!str) return "-";
    return formatDate(new Date(str), "YYYY-mm-dd HH:MM")
}


// 分页改变
const onHandleSizeChange = (val: number) => {
    state.limit = val;
    accountList();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.page = val;
    accountList();
};


const getLevel = (lev: any) => {

    let str = "";
    state.levelList.forEach(element => {
        if (element.id == lev) {
            str = element.levelName;
        }
    });


    return str;
}


const accountList = async () => {
    let vo = {
        page: state.page,
        limit: state.limit
    } as any;


    if (state.ruleForm.address) vo["address"] = state.ruleForm.address;
    if (state.ruleForm.parentAddress) vo["parentAddress"] = state.ruleForm.parentAddress;


    if (state.ruleForm.userLevel) vo["userLevel"] = state.ruleForm.userLevel;

    if (state.ruleForm.nodeLevel) vo["nodeLevel"] = state.ruleForm.nodeLevel;

    if (state.ruleForm.nodeALevel) vo["nodeALevel"] = state.ruleForm.nodeALevel;
    if (state.ruleForm.nodeBLevel) vo["nodeBLevel"] = state.ruleForm.nodeBLevel;
    if (state.ruleForm.nodeCLevel) vo["nodeCLevel"] = state.ruleForm.nodeCLevel;
    if (state.ruleForm.nodeDLevel) vo["nodeDLevel"] = state.ruleForm.nodeDLevel;




    if (state.ruleForm.createTime && state.ruleForm.createTime.length > 0) {
        vo["createTime"] = [formatDate(new Date(state.ruleForm.createTime[0]), "YYYY-mm-dd HH:MM:SS"), formatDate(new Date(state.ruleForm.createTime[1]), "YYYY-mm-dd HH:MM:SS")].join();
    }


    // if (sortsStr()) vo["sorts"] = sortsStr();


    let tempList = await useGatherApi().getUserList(vo);
    state.dataList = tempList.list;
    state.total = tempList.total;
}



const handlerEdit8 = (row: any) => {
    router.push({
        path: '/menuUserTree',
        query: {
            address: row.address
        }
    });
}




const sortsStr = () => {
    let result = "";
    for (var prop in state.sorts) {
        result += prop + (state.sorts[prop] == "descending" ? " desc," : " asc,")
    }
    if (result == "") {
        return null;
    }
    return result.substring(0, result.length - 1)
}

const onSortHandler = (args: any) => {
    // console.log(args)
    if (args.order) {
        state.sorts[args.prop] = args.order;
    } else {
        delete state.sorts[args.prop];
    }
    accountList();
}


const getLevelConfig = async () => {
    // let tempList = await useGatherApi().getLevelList();
    state.levelList = [
        { id: 0, name: "V0", }, { id: 1, name: "V1", }, { id: 2, name: "V2" },
        { id: 3, name: "V3", }, { id: 4, name: "V4", }, { id: 5, name: "V5" }
    ];
}

// 页面加载时
onMounted(async () => {

    await getLevelConfig();
    onSortHandler({ prop: "CREATED_DATE", order: "descending" });
});





</script>



<style scoped lang="scss">
.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.system-offer-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}


.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>
